<template>
  <div v-loading="loading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(255, 255, 255, 0.8)">
    <div style="margin-bottom: 10px;">
      <el-tag>系统</el-tag>
      <el-select style="margin-left: 10px;" v-model="systemName" size="mini" @change="syschange" filterable>
        <el-option v-for="item in systemList"
                   :key="item.id"
                   :value="item.systemName"
                   :label="item.systemName">
        </el-option>
      </el-select>
    </div>
    <hr>
    <div>
      <el-tag>数据统计</el-tag>
    </div>
    <div class="wrapper">
      <div class="item" style="margin-left: -10%;">
        <div><span>自动化执行用例总数</span> : <span>{{caseTotalCount}}</span></div>
      </div>
      <div class="item">
        <div><span>自动化通过率</span> : <span>{{(averagePassRate*100).toFixed(2)}}%</span></div>
      </div>
    </div>

    <div>
      <el-tag>用例总数变化</el-tag>
    </div>
    <div class="echart" id="mychart1" :style="{ width: '98%', height: '250px' }"></div>
    <div>
      <el-tag>通过率</el-tag>
    </div>
    <div class="echart" id="mychart2" :style="{ width: '98%', height: '250px'  }"></div>
    <div>
      <el-tag>执行通过率统计</el-tag>
    </div>
    <div style="margin-top: 10px;">
      <el-table
        border
        stripe
        row-id="resourceID"
        row-key="resourceID"
        ref="searchTable"
        :data="tableData"
        highlight-current-row
        class="table temp-table"
        style="width: 100%"
        :max-height="450"
        :header-cell-style="{background:'#F5F5F5'}"
        highlight-hover-row
        @sort-change="schange"
      >
        <el-table-column label="序号" width="50px" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column label="创建时间" sortable="custom"  width="150px"  align="center" prop="createTime">
          <template slot-scope="scope">
            <span>{{scope.row.createTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="系统" width="150px" align="center" prop="systemName"></el-table-column>

        <el-table-column label="测试计划"  align="center" prop="testPlanName"></el-table-column>

        <el-table-column label="用例数" width="150px" align="center" prop="caseCount"></el-table-column>

        <el-table-column label="通过率" sortable="custom"  width="150px"  align="center" prop="passRate">
          <template slot-scope="scope">
            <span>{{(scope.row.passRate*100).toFixed(2) }}%</span>
          </template>
        </el-table-column>

        <el-table-column label="责任人"  align="center"  width="100px"  prop="holder"></el-table-column>
        <el-table-column label="耗时(秒)"  align="center"  width="100px"  prop="costTime">
          <template slot-scope="scope">
            <span>{{(scope.row.costTime/1000)}}</span>
          </template>
        </el-table-column>

        <el-table-column label="详情"  width="200px" align="center">
          <template slot-scope="scope">
            <span style="color: #00b4ff;cursor:pointer;" @click="lookDetail(scope.row)">查看详情</span>
          </template>
        </el-table-column>


      </el-table>

    </div>
    <div>
      <el-pagination
        v-show="pagination.total>0"
        :current-page.sync="pagination.currentPage"
        :page-size.sync="pagination.pageSize"
        :layout="layout"
        :page-sizes="pagination.pageOptions"
        :total="pagination.total"
        v-bind="$attrs"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
  import * as echarts from "echarts";
  // const base = "http://192.168.74.103:80"
  import domain from '../../../../domain.js'
  const base = domain.target
  export default {
    name: "biz",
    async created () {
      console.log("created")
      await this.getSystemList();
      await this.getchartsData();
      await this.getList();
    },
    mounted() {
      console.log("mouted")
      // const myChart = echarts.init(document.getElementById("mychart1"));//
      // const myChart2 = echarts.init(document.getElementById("mychart2"));//
      //
      // myChart.setOption(this.option1);// 渲染页面
      // myChart2.setOption(this.option2);// 渲染页面

    },

    data() {
      return {
        loading:false,
        systemName:"",
        // systemCount:0,
        caseTotalCount:0,
        averagePassRate:0,
        systemList:[],
        tableData: [],
        activeName: "1",
        option1: {
          tooltip: {},
         /* title: {
            text: "用例总数变化",
            textStyle: {
              fontSize: "14",
              fontWeight: "bolder"
            },
          },*/
          grid: {
            left: '5%',
            width: "90%",
          },
          xAxis: {
            type: 'category',
            data: [], // 后端获取
            // max:7,
            boundaryGap: true,
            axisLabel: {
              interval: 0,
              rotate: -10
            }
          },
          /* legend: {
             data: ['总数',{name:"未关闭",textStyle:{color:"red"}}]//'line2'
           },*/
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              // formatter: '{value} %'
            },
          },
          series: [
            {
              name: '用例总数变化',
              data: [], // 后端获取
              type: 'line',
              color: "#409EFF",
              smooth: true,
              // barWidth :'55px',
              label: {
                show: true,
                // rotate:60,
                position: 'top',
                color: "black"
              },
              lineStyle: {
                width: 2
              },
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    // formatter: '{c}%'
                  }
                }
              },
            },
            /* {
               name: '未关闭',
               data: [], // 后端获取
               type: 'bar',
               color: "lightblue",
               smooth: true,
               barWidth :'55px',
               label:{
                 show:true,
                 // rotate:60,
                 position:'top',
                 color:"black"
               },
               // lineStyle:{
               //   width: 2,
               //   color:"red"
               // },
               itemStyle: {
                 color:"red"
               },
             },*/
          ],
          /*   dataZoom: [
               {
                 show: true,
                 height: 5,
                 xAxisIndex: [0],
                 bottom: 20,
                 showDetail: false,
                 showDataShadow: false,
                 borderColor: "transparent",
                 textStyle: {
                   fontSize: 0
                 },
                 // startValue:1,
                 endValue: 10,//从0开始的相当于5个
                 backgroundColor: "rgba(0,0,0,0)",
                 borderWidth: 0,
                 handleSize: "0%",
                 handleStyle: {
                   color: "#d3dee5"
                 }
               }
             ]*/

        },
        option2:{
          tooltip:{},
          /*  title:{
              text: "系统总数",
              textStyle:{
                fontSize:"14",
                fontWeight:"bolder"
              },
            },*/
          grid:{
            left:'5%',
            width:"90%",
          },
          xAxis: {
            type: 'category',
            data: [], // 后端获取

            // max:7,
            boundaryGap: true,
            axisLabel: {
              interval: 0,
              rotate: -10
            }
          },
          /* legend: {
             data: ['自动化执行次数']//'line2'
           },*/
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: function (value) {
                // 将小数转换为百分比，保留两位小数
                console.log("value",value)
                return (value)+ '%';
              }
            }
          },
          series: [
            {
              name: '系统总数',
              data: [], // 后端获取
              type: 'line',
              color: "#409EFF",
              smooth: true,
              // barWidth :'55px',
              label:{
                show:true,
                // rotate:60,
                position:'top',
                color:"black"
              },
              lineStyle:{
                width: 2
              },
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    formatter: '{c}%'
                  }
                }
              },
            },
            /* {
               name: '自动化用例总数',
               data: [], // 后端获取
               type: 'line',
               color: "lightblue",
               smooth: true,
               label:{
                 show:true,
                 // rotate:60,
                 position:'top',
                 color:"black"
               },
               lineStyle:{
                 width: 2,
                 color:"red"
               },
               itemStyle: {
                 normal: {
                   label: {
                     show: true,
                     position: 'top',
                     // formatter: '{c}%'
                   }
                 }
               },
             },*/
          ],
          /* dataZoom: [
             {
               show: true,
               height: 5,
               xAxisIndex: [0],
               bottom: 20,
               showDetail: false,
               showDataShadow: false,
               borderColor: "transparent",
               textStyle: {
                 fontSize: 0
               },
               // startValue:1,
               endValue: 10,//从0开始的相当于5个
               backgroundColor: "rgba(0,0,0,0)",
               borderWidth: 0,
               handleSize: "0%",
               handleStyle: {
                 color: "#d3dee5"
               }
             }
           ]*/

        },
        layout: 'total, sizes, prev, pager, next, jumper',
        pagination: {
          total: 0, // 总数
          pageSize: 8, // 页面多少条数据
          currentPage: 1, // 当前在哪页
          pageOptions: [5, 8, 10]// 页面选项
        },
        order: "desc",
        orderField:"passRate"

      }
    },
    methods: {
      lookDetail(data){
        console.log(data)
        let newUrl = data.detailLink
        let a = document.createElement('a');
        a.setAttribute('href', newUrl);
        a.setAttribute('target', '_self');
        // a.setAttribute('download', '结论.pdf'); // 自定义文件名（有效）
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);

      },
      syschange(){
        this.getchartsData()
        this.getList()
      },
      async getSystemList(){
        let url = `${base}/join/get/business/or/system/list?type=system`
        await this.$get(url, {}).then(res => {
          if (res&& res.data.code ==20000){
            this.systemList = res.data.obj || []
            if (this.systemList.length>0){
              this.systemName = this.systemList[0].systemName
            }
          }
        })
      },
      async getchartsData(){
        this.loading = true
        console.log(this.systemName)
        let url = `${base}/join/get/summary?type=system&myName=${this.systemName} `
        await this.$get(url, {}).then(res => {
          if (res&& res.data.code ==20000){
            this.loading = false
            // this.systemCount = res.data.obj.systemCount
            this.caseTotalCount = res.data.obj.caseTotalCount
            this.averagePassRate = res.data.obj.averagePassRate
            let monthData = res.data.obj.monthData
            let x = []
            let y1 = []
            let y2 = []
            monthData.forEach((item)=>{
              x.push(item.month)
              y1.push(item.totalCount)
              let averagePassRate = (item.averagePassRate*100).toFixed(2)
              y2.push(averagePassRate)
            })
            this.option1.xAxis.data = x
            this.option2.xAxis.data = x
            this.option1.series[0].data = y1
            this.option2.series[0].data = y2
            const myChart = echarts.init(document.getElementById("mychart1"));//
            const myChart2 = echarts.init(document.getElementById("mychart2"));//
            //
            myChart.setOption(this.option1);// 渲染页面
            myChart2.setOption(this.option2);// 渲染页面
          }
        })
      },

      async getList(){
        //pageNum=1&pageSize=10&myOrder=asc&withSystemName=selection
        let url =`${base}/join/get/month/system/data`
        let params = {
          pageSize: this.pagination.pageSize,
          pageNum: this.pagination.currentPage,
          myOrder:this.order,
          orderField:this.orderField,
          withSystemName:this.systemName
        }
        this.$get(url, {params}).then(res => {
          if (res&& res.data.code ==20000){
            this.pagination.total = res.data.obj.total*1
            this.tableData = res.data.obj.list || [];
          }
        })
      },
      handleSizeChange(val) {
        console.log(val)
        this.pagination.currentPage = 1
        this.pagination.pageSize = val
        console.log(this.currentPage)
        this.getList()

      },

      handleCurrentChange(val) {
        console.log(val)
        this.pagination.currentPage = val
        this.getList()

      },
      schange({column, prop, order}){
        console.log(column, prop, order)
        if (column.property=="passRate"){
          if (order =='ascending'){
            this.orderField="passRate"
            this.order = "asc"
          }else if (order =='descending'){
            this.orderField="passRate"
            this.order = "desc"
          }else{
            this.orderField="passRate"
            this.order = "desc"
          }
        }
        if (column.property=="createTime"){
          if (order =='ascending'){
            this.orderField="createTime"
            this.order = "asc"
          }else if (order =='descending'){
            this.orderField="createTime"
            this.order = "desc"
          }else{
            this.orderField="passRate"
            this.order = "desc"
          }
        }
        this.getList()
      }
    },

    computed: {},
    watch: {},
  }
</script>

<style scoped lang="scss">
  .wrapper {
    width: 99%;
    margin: 0 auto;
    /*border: 1px solid #e8e8e8;*/
    /*border-radius: 5px;*/
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;

    .item {
      width: 20%;
      height: 140px;
      border: 1px solid #e8e8e8;
      border-radius: 5px;
      /*box-shadow: 3px 3px 3px 1px rgba(224, 200, 209, 0.2);*/
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 25px;
      font-weight: bold;
      margin-left: 10%;
      /*background-color: lightyellow;*/
      /*background-color: rgba(64, 158, 255, .6);*/
      background-color: rgba(64, 158, 255, .6);
      box-shadow: 0 0 5px 0 ;

      /*background: inherit;*/

      backdrop-filter: blur(10px);
    }
  }

  hr{
    border-bottom: 1px solid lightgray;
  }

  .el-tag{
    font-size: 17px;
  }
</style>
